import React, {Component} from 'react';
import {Menu, Icon} from 'antd';
import './Iheader.css';
import {BrowserRouter as Router, Link} from "react-router-dom";

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

export default class Iheader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: ['', 'none', 'none', 'none', 'none', 'none', '', 'none'],
            choose_num: 0,
            CompanyName: '临城中联福石水泥有限公司',
        };
    }

    onChangekey = (e) => {
        this.props.onChange(e.key);
    };

    componentWillMount() {
        fetch('/api/info', {
            method: 'post',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {
                    if (window.localStorage.state == 0) {
                        this.setState({
                            display: ['', 'none', 'none', 'none', 'none', 'none', 'none', ''],
                        })
                    }
                    else if (window.localStorage.department == 1) {
                        if (window.localStorage.privilege == 1 || window.localStorage.privilege == 3) {
                            this.setState({
                                display: ['', '', 'none', 'none', '', 'none', 'none', ''],
                            })
                        }
                        // if (window.localStorage.privilege == 3) {
                        //     this.setState({
                        //         display: ['', '', 'none', '', '', 'none', 'none', ''],
                        //     })
                        // }
                    }
                    else if (window.localStorage.department == 2) {
                        if (window.localStorage.privilege == 1 || window.localStorage.privilege == 3) {
                            this.setState({
                                display: ['', 'none', '', 'none', '', 'none', 'none', ''],
                            })
                        }
                        // else if (window.localStorage.privilege == 3) {
                        //     this.setState({
                        //         display: ['', '', '', '', '', 'none', 'none', ''],
                        //     })
                        // }
                    }
                    // && window.localStorage.privilege >= 4
                    else if (window.localStorage.department == 3) {
                        if (window.localStorage.privilege >= 4) {
                            this.setState({
                                display: ['', '', '', '', '', '', 'none', ''],
                            })
                        }
                        else
                            this.setState({
                                display: ['', 'none', 'none', 'none', 'none', 'none', 'none', ''],
                            })
                    }

                }
            })
            .catch(error => console.error('Error:', error))
    }

    handleLogout = () => {
        const jsonData = {
            'token': window.localStorage.token,
        };
        fetch("/api/logout", {
            method: 'POST',
            credentials: "include",
            body: JSON.stringify(jsonData),
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {//判定是否成功
                    window.localStorage.clear();
                    this.setState({
                        display: ['', 'none', 'none', 'none', 'none', 'none', '', 'none'],
                    });
                    this.onChangekey({"key": 0});
                }
            })
            .catch(error => console.error('Error:', error))
    };

    render() {
        return (
            <div className='iheader'>
                {/* 浮动导航栏 */}
                {/* <div className='head_menu col-md-16 col-sm-16'> */}
                {/* <div className="menu col-md-12 col-sm-12"> */}
                {/**图片盒子*/}
                <a className="head_icon col-md-8 col-sm-8" href="">
                    <img src={require("../img/logo.png")} alt=""/>
                </a>
                <a className="head_companyName col-md-8 col-sm-8">{this.state.CompanyName}</a>
                <Menu
                    mode="horizontal"
                    className="icon"
                    style={{lineHeight: '60px', float: 'right'}}
                    defaultSelectedKeys={['0']}
                    onSelect={this.onChangekey}
                >
                    {/* <Menu.Item className='header_menuItem' key="-1">
                        
                    </Menu.Item> */}
                    <Menu.Item className='header_menuItem submenu-title-wrapper' key="0"
                               style={{display: this.state.display[0]}}>
                        <Icon type="home"/> 首页
                    </Menu.Item>

                    <SubMenu
                        key='sub1'
                        style={{display: this.state.display[1]}}
                        title={<span className="submenu-title-wrapper"><Icon type="experiment"/>化验室表格</span>}>
                        <Menu.Item className='header_menuItem' key="1">
                            入窑生料原材料化学分析报告单
                        </Menu.Item>
                        <Menu.Item className='header_menuItem' key="2">
                            出磨生料原材料化学分析报告单
                        </Menu.Item>
                        <Menu.Item className='header_menuItem' key="3">
                            控制室原始记录
                        </Menu.Item>
                        <Menu.Item className='header_menuItem' key="4">
                            生熟料全分析汇总表
                        </Menu.Item>

                    </SubMenu>
                    <SubMenu
                        key='sub2'
                        style={{display: this.state.display[2]}}
                        title={<span className="submenu-title-wrapper"><Icon type="database"/>中控室表格</span>}>
                        <Menu.Item className='header_menuItem' key="5">
                            中控室
                        </Menu.Item>
                        <Menu.Item className='header_menuItem' key="6">
                            中控室续表
                        </Menu.Item>
                    </SubMenu>

                    <Menu.Item className='header_menuItem' key="7" style={{display: this.state.display[3]}}>
                        <Icon type="setting"/>设置合格标准
                    </Menu.Item>
                    <Menu.Item className='header_menuItem' key="8" style={{display: this.state.display[4]}}>
                        <Icon type="eye"/> 查看表单
                    </Menu.Item>
                    <Menu.Item className='header_menuItem' key="9" style={{display: this.state.display[5]}}>
                        <Icon type="team"/>员工管理
                    </Menu.Item>
                    <Menu.Item className='header_menuItem' key="login" style={{display: this.state.display[6]}}>
                        <Icon type="login"/>登录<a href="login" rel="noopener noreferrer"/>
                    </Menu.Item>
                    <Menu.Item className='header_menuItem' key="reg" style={{display: this.state.display[6]}}>
                        <Icon type="user-add"/>注册<a href="reg" rel="noopener noreferrer"/>
                    </Menu.Item>
                    <Menu.Item className='header_menuItem' key="logout" style={{display: this.state.display[7]}}
                               onClick={this.handleLogout}>
                        <Icon type="logout"/>注销
                    </Menu.Item>
                </Menu>
            </div>
            //   </div>
            //   </div>
        )
    }
}